<template>
    <el-drawer
        v-model="show"
        title="全局配置"
        @closed="closed"
        @opened="getGlobalStyle"
        class="drawer-container"
        >

        <el-form :model="form_data" label-width="80px">
            <el-divider content-position="left">导航栏</el-divider>
            <el-form-item label="标题">
                <el-input v-model="form_data.navigationBarTitleText" />
            </el-form-item>

            <el-form-item label="标题颜色">
                <el-radio-group v-model="form_data.navigationBarTextStyle" class="ml-4">
                    <el-radio label="black" size="large">黑色</el-radio>
                    <el-radio label="white" size="large">白色</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="背景颜色">
                <el-color-picker v-model="form_data.navigationBarBackgroundColor" />
            </el-form-item>

            <el-divider content-position="left">页面</el-divider>

            <el-form-item label="背景颜色">
                <el-color-picker v-model="form_data.backgroundColor" />
            </el-form-item>

        </el-form>


        <!--S提交-->
        <div class="submit" @click="submit">
            <el-icon><CircleCheckFilled /></el-icon>
            确认配置
        </div> 
        <!--E提交-->

    </el-drawer>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, reactive } from 'vue'
import { post, get } from '@/util/url.js'
import { ElMessage } from 'element-plus'
// 是否显示该组件
const show = ref(false) 

/**
 * 表单数据,各个数据字段请参考  
 * https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle
 */
let form_data = reactive({
    navigationBarTitleText: '服务商城',
    navigationBarTextStyle:'black',
    navigationBarBackgroundColor: '',
    backgroundColor: '#f8f8f8'
})

const props = defineProps({
  // 模板id  
  tpl_id: {
    default: 0
  }
})

const emit = defineEmits(['update:modelValue', 'closed'])

// 是否显示组件
const modelValue = ref(false)
// 监听组件开启关闭
watch(modelValue, (value) => {
  show.value = value
})
onMounted(() => {
  show.value = modelValue.value
})

/**
 * 关闭组件
 */
const closed = () => { 
  emit('update:modelValue', false)
  emit('closed', false)
}
 
/**
 * 获取全局配置
 */
const getGlobalStyle = async () => {
    let {
        navigationBarTitleText,
        navigationBarTextStyle,
        navigationBarBackgroundColor,
        backgroundColor
    } = await get("edit/globalStyle",{
        tpl_id: props.tpl_id
    })
    form_data.navigationBarTitleText = navigationBarTitleText
    form_data.navigationBarTextStyle = navigationBarTextStyle
    form_data.navigationBarBackgroundColor = navigationBarBackgroundColor
    form_data.backgroundColor = backgroundColor
}

/** 
 * 提交
 */
const submit = () => {
    post("edit/globalStyle",{
        tpl_id:props.tpl_id,
        data: form_data
    })
    .then(() => {
        ElMessage({
              showClose:true,
              message: "设置成功",
              type: 'success'
        })
    })
}
</script>

<style lang="scss" scoped>
    .submit{
        display: flex;
        gap: 5px;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        cursor: pointer;
        background-color:var(--main-bg-color);
        font-size: 14px;
        font-weight: 300;
    }
</style>
